<template>
  <el-pagination
    class="pagination"
    :current-page="modelValue"
    :page-size="pageSize"
    :total="total"
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
const props = defineProps({
  modelValue: Number,
  pageSize: Number,
  total: Number
})

const emit = defineEmits(['update:modelValue'])

const handleCurrentChange = (page) => {
  emit('update:modelValue', page)
}
</script>

<style scoped lang="scss">
pagination {
  margin-top: 20px;
  text-align: right;
}
</style>